<template>
    <div>
        <el-container>
            <el-aside>
                <el-row class="tac">
                    <el-col :spa="24">
                        <el-row class="block-col-2">
                            <el-col :span="12">
                                <!--                          <span class="demonstration">click 激活</span>-->
                                <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        {{ userInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-plus">个人设置</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-circle-plus">系统设置</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-circle-plus-outline">团队管理</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-check">清除缓存</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-circle-check"><span @click="logout">退出登录</span>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24">
                        <el-menu router
                                 default-active="1"
                                 class="el-menu-vertical-demo">
                            <!--                            <el-menu-item index="welcome">-->
                            <!--                                <template slot="title">-->
                            <!--                                    <i class="el-icon-s-claim"></i>-->
                            <!--                                    <span>仪表盘</span>-->
                            <!--                                </template>-->
                            <!--                            </el-menu-item>-->
                            <el-menu-item index="date">
                                <template slot="title">
                                    <i class="el-icon-date"></i>
                                    <span>日历</span>
                                </template>
                            </el-menu-item>
                            <el-submenu index="projects">
                                <template slot="title">
                                    <i class="el-icon-data-line"></i>
                                    <span>项目</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item>
                                        <el-button @click="dialogCreateProject = true">新建项目</el-button>
                                    </el-menu-item>
                                    <el-menu-item v-for="(item) in projectList" :key="item.projectId"
                                                  :index="`projects?p=${item.projectId}`">
                                        <span>{{ item.name }}</span>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <router-view>
                    <welcome-component></welcome-component>
                    <date-component></date-component>
                    <projects-component></projects-component>
                </router-view>
            </el-main>
        </el-container>
        <el-dialog
            title="新建项目"
            :visible.sync="dialogCreateProject"
            width="40%">
            <el-form ref="form" :model="project" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="project.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogCreateProject = false">取 消</el-button>
                <el-button type="primary" @click="createProject">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import WelcomeComponent from "@/components/index/WelcomeComponent.vue";
import DateComponent from "@/components/index/DateComponent.vue";
import ProjectsComponent from "@/components/index/ProjectsComponent.vue";

export default {
    components: {ProjectsComponent, DateComponent, WelcomeComponent},
    data() {
        return {
            dialogCreateProject: false,
            project: {
                name: "",
            },
            projectList: [],
            userInfo: {},
        }
    },
    methods: {
        logout() {
            localStorage.clear();
            this.$router.push("/login")
        },
        createProject() {
            if (this.project.name.length === 0) {
                this.$notify.error("名称不能为空");
                return;
            }
            this.$axios({
                url: "/api/p/new",
                method: "post",
                headers: {
                    token: localStorage.getItem("token")
                },
                data: {
                    name: this.project.name
                }
            }).then((res) => {
                if (res.status === 200) {
                    this.$notify.success("成功")
                    this.project.name = "";
                    this.dialogCreateProject = !this.dialogCreateProject;
                }
            })
        },
        getMyProjectList() {
            this.$axios({
                url: "/api/p/my",
                method: "get",
                headers: {
                    token: localStorage.getItem("token")
                }
            }).then((res) => {
                if (res.data.success) {
                    this.projectList = res.data.result;
                } else {
                    this.$notify.warning(res.data.errorDetail);
                }
            })
        },
        getMyInfo() {
            this.$axios({
                url: "/api/user/info",
                method: "get",
                headers: {
                    token: localStorage.getItem("token")
                }
            }).then((res) => {
                console.log(res)
                if (res.data.success) {
                    localStorage.setItem("uid", res.data.result.uid);
                    localStorage.setItem("nickname", res.data.result.nickname);
                    let tempPath = res.data.result.icsFileName+"";
                    let icsPath = tempPath.substring(0, tempPath.lastIndexOf(".ics"));
                    localStorage.setItem("icsPath", icsPath)
                    this.userInfo.nickname = res.data.result.nickname
                }
            })
        }
    },
    created() {
        window.onbeforeunload = () => {
            localStorage.clear();
        }
        let token = localStorage.getItem("token");
        if (token === null || token === undefined || (token instanceof String && token.length === 0)) {
            this.$notify.error({
                title: "还未登录",
            })
            this.$router.push("/login");
        } else {
            this.getMyInfo();
            this.getMyProjectList();
        }
    }
}
</script>
<style>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    margin-left: 30px;
    margin-top: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}
</style>